<template>
    <div class="common-detail">
        <div class="top">
            <div class="title">{{title}}</div>
            <template v-if="data">
                <van-cell v-for="(value, key) of data" :title="key" :value="value" :key="key"/>
            </template>
            <div v-else>初始化失败，请检查参数是否正确</div>
        </div>
        <div class="back-btn" @click="$router.back()">返回</div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      data: {}
    };
  },
  watch: {
    $route: {
      handler() {
        this.title = document.title = this.$route.query.title;
        try {
          this.data = JSON.parse(this.$route.query.data);
        } catch (e) {
          this.data = null;
        }
      },
      immediate: true
    }
  }
};
</script>

<style lang="less" scoped>
.common-detail{
  padding: 24px;
  .top {
    background-color: #ffffff;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    padding-bottom: 20px;
    margin: 0 auto;
    .title {
      height: 64px;
      background-color: #3198ed;
      color: #ffffff;
      font-size: 30px;
      line-height: 64px;
      padding: 0 16px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    /deep/ .van-cell {
        height: 80px;
        line-height: 80px;
        font-size: 28px;
    }
  }
  .back-btn{
      margin-top: 20px;
      height: 80px;
      line-height: 80px;
      background: #3198ed;
      color: #fff;
      font-size: 30px;
      text-align: center;
      border-radius: 10px;
  }
}
</style>
